<template>
  <div class="app-container">
    <!-- 详情日志页面 -->
    <el-drawer
      :visible.sync="visible"
      direction="rtl"
      size="80%"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :show-close="false"
    >
      <template v-slot:title>
        <div class="drawer-header">
          <span>日志</span>
          <div>
            <el-button type="primary" icon="el-icon-refresh" @click="handleClear">
              清空
            </el-button>
            <el-button icon="el-icon-close" @click="handleClose">
              取消
            </el-button>
          </div>
        </div>
      </template>
      <editor :value="detail" :options="editorOptions" lang="java" theme="chrome" width="100%" height="100%" @init="editorInit" />
    </el-drawer>
  </div>
</template>

<script>
import permission from '@/directive/permission/index' // 权限判断指令
// import checkPermission from '@/utils/permission' // 权限判断函数
import waves from '@/directive/waves' // waves directive
import { v4 as UUIDv4 } from 'uuid'
// import { parseTime } from '@/utils'

export default {
  // 当前页面名称（组件）
  name: 'InstanceLogForm',
  // 引用组件
  components: {
    editor: require('vue2-ace-editor')
  },
  directives: { permission, waves },
  filters: {},
  props: {
    log: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 表单数据对象
      formData: {},
      // 是否显示弹出层
      visible: false,
      detail: '',
      // 配置项
      editorOptions: {
        wrap: true, // 换行
        enableLiveAutocompletion: true, // 智能补全
        enableSnippets: true, // 启用代码段
        readOnly: true
      },
      websocket: undefined
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 查询table数据对象
    handleInit() {
      this.visible = this.log.visible
      this.formData.id = this.log.id
      const clientId = UUIDv4()
      this.initWebSocket(clientId)
    },
    // 初始化编辑器
    editorInit() {
      require('brace/ext/language_tools')
      require('brace/mode/html')
      require('brace/mode/javascript')
      require('brace/mode/less')
      require('brace/mode/java')
      require('brace/theme/chrome')
      require('brace/snippets/javascript')
      require('brace/snippets/java')
    },
    // 初始化 websocket
    initWebSocket(clientId) {
      console.log(process.env.VUE_APP_BASE_API)
      // ws地址
      const uri = process.env.VUE_APP_BASE_API.replace('http', 'ws') + '/websocket/admin/instance/log/' + clientId + '/' + this.formData.id
      console.log(uri)
      this.websocket = new WebSocket(uri)
      this.websocket.onopen = this.handleWsOpen
      this.websocket.onerror = this.handleWsError
      this.websocket.onmessage = this.handleWsMessage
      this.websocket.onclose = this.handleWsClose
    },
    handleWsOpen() {
      console.log('WebSocket连接成功!')
      // websocket.send(""WebSocket连接成功")//发送消息
    },
    // 错误
    handleWsError(e) {
      console.error('WebSocket连接发生错误!', e)
    },
    // 接收服务器推送消息
    handleWsMessage(e) {
      this.detail += e.data
      this.detail += '\n'
    },
    // 关闭
    handleWsClose(e) {
      console.log(e)
      console.log('WebSocket连接关闭了！')
    },
    // close(){
    //   this.websock.close()
    // },
    // send(){
    //   if(this.websock && this.websock.readyState==1){
    //     this.websock.send("S1")
    //   }else{
    //     console.log("连接已关闭")
    //   }
    //
    // },
    // open(){
    //   this.initWebSocket()
    // },
    // 清空当前日志
    handleClear() {
      this.detail = ''
    },
    // 关闭弹出层
    handleClose() {
      this.websocket.close()
      this.visible = false
    }
  }
}
</script>
<style>
.vue-treeselect__control{
  height: 32px;
}
.el-input.is-disabled .el-input__inner {
  background-color: #ffffff !important;
  cursor: pointer !important;
}
.el-radio.is-disabled .el-radio__inner {
  background-color: #ffffff !important;
  cursor: pointer !important;
}
.el-radio__input.is-disabled {
  background-color: #ffffff !important;
  cursor: pointer !important;
}
.el-radio__input.is-disabled.is-checked {
  background-color: #ffffff !important;
  cursor: pointer !important;
}
.el-radio__label {
  background-color: #ffffff !important;
  cursor: pointer !important;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #ffffff !important;
}
.vue-treeselect--disabled .vue-treeselect__control {
  background-color: #ffffff !important;
}
</style>
